<template>
  <div ref="chartRef" class="chart-box" style="width: 1920px;height: 1081px">
  </div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue'
import * as echarts from 'echarts'
import svgRaw from './svg/bg.svg?raw'

const chartRef = ref(null)
let chartInst = null
const ready = ref(false)

// 定义坐标点，方便复用
const points = {
  shanghai: {name: '上海', value: [161.47, 91.23]},
  beijing: {name: '北京', value: [861.47, 191.23]}
}

function registerFootballMap() {
  const svgDoc = new DOMParser().parseFromString(svgRaw, 'image/svg+xml')
  echarts.registerMap('football', {svg: svgDoc})
}

function makeOption() {
  return {
    backgroundColor: '#228b22',
    tooltip: {trigger: 'item'},
    geo: {
      map: 'football',
      roam: true,
      layoutCenter: ['50%', '50%'],
      layoutSize: '1920px',
      aspectScale: 1,
      boundingCoords: null,
      zoom: 1,
      label: {
        show: true
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1,
        areaColor: 'transparent'
      },
      emphasis: {
        itemStyle: {
          areaColor: 'rgba(255,255,255,0.1)'
        }
      }
    },
    series: [
      // 连线系列 - 放在第一个，这样点会显示在线上方
      {
        name: '连线',
        type: 'lines',
        coordinateSystem: 'geo',
        zlevel: 1,
        effect: {
          show: true,
          period: 6, // 箭头速度
          trailLength: 0.7, // 特效尾迹长度
          symbol: 'arrow', // 箭头图标
          symbolSize: 6, // 图标大小
          color: '#fff' // 特效颜色
        },
        lineStyle: {
          color: '#ffeb3b', // 线条颜色
          width: 2, // 线条宽度
          curveness: 0.2, // 线条曲度，0为直线
          type: 'solid' // 线条类型：solid实线，dashed虚线
        },
        data: [{
          fromName: points.shanghai.name,
          toName: points.beijing.name,
          coords: [
            points.shanghai.value, // 起点坐标
            points.beijing.value   // 终点坐标
          ]
        }]
      },
      // 标记点系列
      {
        name: '标记点',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2, // 确保点显示在线上方
        symbol: 'circle',
        symbolSize: 20,
        label: {
          show: true,
          formatter: '{b}',
          position: 'right',
          color: '#fff',
          fontSize: 16,
          fontWeight: 'bold'
        },
        itemStyle: {
          color: '#ff0000',
          shadowBlur: 10,
          shadowColor: '#fff'
        },
        emphasis: {
          scale: true,
          itemStyle: {
            color: '#ffff00'
          }
        },
        data: [
          points.shanghai,
          points.beijing
        ]
      }
    ]
  }
}

onMounted(async () => {
  await registerFootballMap()
  ready.value = true
  chartInst = echarts.init(chartRef.value)
  chartInst.setOption(makeOption())

  const ro = new ResizeObserver(() => chartInst.resize())
  ro.observe(chartRef.value)
  onBeforeUnmount(() => ro.disconnect())
})

onBeforeUnmount(() => {
  chartInst?.dispose()
})
</script>

<style scoped>
.chart-box {
  width: 1920px;
  height: 1081px;
}
</style>
